<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	<img src="pic.jpg" width="300" height="300">
	<img src="pic.jpg" style="filter: blur(3px)" width=300 height=300>
	<img alt=filter:opacity(50%),width="150" src="pic.jpg")
	style="filter:opacity(50%)" width="150">
	<img alt=filter:blur(3px) height=250 src="pic.jpg" style="filter: blur(3px)" width=150>
	<table border="1" width="150">
	<tbody>
	<tr>
		<td width="25%"><img alt='正常图片' height="150" src="pic.jpg" width=150</td>
		<td width="75%"><img alt='水平翻转' height="150" src="pic.jpg" style="transform:rotateY(180deg)"width=150</td>
	</tr>
	<tr>
		<td width="25%"><img alt='垂直反转' height="150" src="pic.jpg" style="transform:rotateX(180deg)" width=150</td>
		<td width="75%"><img alt='先水平反转，然后垂直反转' height="150" src="pic.jpg" style="transform:rotateX(180deg)rotateY(180deg)"width=150</td>
	</tr>
	</tbody>
	</table> 
	<!-------------------GRAL、Invert、Xray滤镜-------------->
	<tr>
		<td width="33%"><img border="0" height="250" src="pic.jpg" width="180"></td>
		<td width="33%"><img alt="grayscale(%) 灰度图" height="250" src="pic.jpg" style="filter: grayscale(100%)" width="180"></td>
	</tr>
	<tr>
		<td width="33%"><img alt="filter:invert(%) 底片效果" height="250" src="pic.jpg" style="filter: invert(100%)" width="180"</td>
		<td width="33%"><img alt="filter:invert(100%)grayscale(100%) X光效果" height="250" src="pic.jpg" style="filter: invert(100%)grayscale(100%)" width="180"</td>
	</tr>
	</body>
</html>